    <style include="cr-shared-style settings-shared md-select">
      cr-input {
        /* Larger cr-input margin (by reserving space for error display). */
        --cr-input-error-display: block;
        margin-bottom: 0;
        width: var(--settings-input-max-width);
      }

      /* Override the padding-top (the space is set by save-to-this-device). */
      div[slot='button-container'] {
        padding-top: 0;
      }

      .md-select + .md-select {
        margin-inline-start: 8px;
      }

      #month {
        width: 70px;
      }

      #saved-to-this-device-only-label {
        /* Overall space between input fields, including space between
           nicknameInput and saved-to-this-device text, between
           saved-to-this-device text and button. */
        margin-bottom: 26px;
        margin-top: 0;
      }

      #year {
        width: 100px;
      }

      /* For nickname input, cr-input-width is the same as other input fields */
      #nicknameInput {
        --cr-input-width: var(--settings-input-max-width);
        width: fit-content;
      }

      #charCount {
        font-size: var(--cr-form-field-label-font-size);
        line-height: var(--cr-form-field-label-line-height);
        padding-inline-start: 8px;
      }

      #nicknameInput:not(:focus-within) #charCount {
        display: none;
      }

      /* Same style as cr-input error except margin-top. */
      #expiredError {
        display: block;
        font-size: var(--cr-form-field-label-font-size);
        height: var(--cr-form-field-label-height);
        line-height: var(--cr-form-field-label-line-height);
        margin: 8px 0;
        visibility: hidden;
      }

      :host([expired_]) #expiredError {
        visibility: visible;
      }

      #expiredError,
      :host([expired_]) #expiration {
        color: var(--google-red-600);
      }

      @media (prefers-color-scheme: dark) {
        #expiredError,
        :host([expired_]) #expiration {
          color: var(--google-red-300);
        }
      }
    </style>
    <cr-dialog id="dialog" close-text="$i18n{close}">
      <div slot="title">[[title_]]</div>
      <div slot="body">
        <cr-input id="numberInput" label="$i18n{creditCardNumber}"
            value="{{creditCard.cardNumber}}" autofocus>
        </cr-input>
        <!-- aria-hidden for creditCardExpiration label since
          creditCardExpirationMonth and creditCardExpirationYear provide
          sufficient labeling. -->
        <label id='expiration' class="cr-form-field-label" aria-hidden="true">
          $i18n{creditCardExpiration}
        </label>
        <select class="md-select" id="month" value="[[expirationMonth_]]"
            on-change="onMonthChange_"
            aria-label="$i18n{creditCardExpirationMonth}"
            aria-invalid$="[[getExpirationAriaInvalid_(expired_)]]">
          <template is="dom-repeat" items="[[monthList_]]">
            <option>[[item]]</option>
          </template>
        </select>
        <select class="md-select" id="year" value="[[expirationYear_]]"
            on-change="onYearChange_"
            aria-label="$i18n{creditCardExpirationYear}"
            aria-invalid$="[[getExpirationAriaInvalid_(expired_)]]">
          <template is="dom-repeat" items="[[yearList_]]">
            <option>[[item]]</option>
          </template>
        </select>
        <div id="expiredError">$i18n{creditCardExpired}</div>
        <!-- Place cardholder name field and nickname field after expiration.-->
        <cr-input id="nameInput" label="$i18n{creditCardName}"
            value="{{creditCard.name}}" spellcheck="false">
        </cr-input>
        <cr-input id="nicknameInput" label="$i18n{creditCardNickname}"
            value="{{creditCard.nickname}}" spellcheck="false" maxlength="25"
            on-input="validateNickname_"
            invalid="[[nicknameInvalid_]]"
            error-message="$i18n{creditCardNicknameInvalid}">
            <div id="charCount" slot="suffix">
              [[computeNicknameCharCount_(creditCard.nickname)]]/25
            </div>
        </cr-input>
        <div id="saved-to-this-device-only-label">
          $i18n{savedToThisDeviceOnly}
        </div>
      </div>
      <div slot="button-container">
        <cr-button id="cancelButton" class="cancel-button"
            on-click="onCancelButtonTap_">$i18n{cancel}</cr-button>
        <cr-button id="saveButton" class="action-button"
            on-click="onSaveButtonTap_"
            disabled="[[!saveEnabled_(nicknameInvalid_, creditCard.*,
                expired_)]]">
          $i18n{save}
        </cr-button>
      </div>
    </cr-dialog>
